
<template>
  <page-view title="$t('advancedAdvanced.dh')：234231029431" logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">

    <detail-list slot="headerContent" size="small" :col="2" class="detail-layout">
      <detail-list-item term="{{ $t('advancedAdvanced.cjr') }}">{{ $t('advancedAdvanced.qll') }}</detail-list-item>
      <detail-list-item term="{{ $t('advancedAdvanced.dgcp') }}">XX{{ $t('advancedAdvanced.fw') }}</detail-list-item>
      <detail-list-item term="{{ $t('advancedAdvanced.cjsj') }}">2018-08-07</detail-list-item>
      <detail-list-item term="{{ $t('advancedAdvanced.gldj') }}"><a>12421</a></detail-list-item>
      <detail-list-item term="{{ $t('advancedAdvanced.sxrq') }}">2018-08-07 ~ 2018-12-11</detail-list-item>
      <detail-list-item term="{{ $t('advancedAdvanced.bz') }}">{{ $t('advancedAdvanced.qylggzrnqr') }}</detail-list-item>
    </detail-list>
    <a-row slot="extra" class="status-list">
      <a-col :xs="12" :sm="12">
        <div class="text">{{ $t('advancedAdvanced.zs') }}</div>
        <div class="heading">{{ $t('advancedAdvanced.dsp') }}</div>
      </a-col>
      <a-col :xs="12" :sm="12">
        <div class="text">{{ $t('advancedAdvanced.ddje') }}</div>
        <div class="heading">¥ 568.08</div>
      </a-col>
    </a-row>
    <!-- actions -->
    <template slot="action">
      <a-button-group style="margin-right: 4px;">
        <a-button>{{ $t('advancedAdvanced.cz') }}</a-button>
        <a-button>{{ $t('advancedAdvanced.cz') }}</a-button>
        <a-button><a-icon type="ellipsis"/></a-button>
      </a-button-group>
      <a-button type="primary" >{{ $t('advancedAdvanced.zcz') }}</a-button>
    </template>

    <a-card :bordered="false" title="$t('advancedAdvanced.lcjd')">
      <a-steps :direction="isMobile() && 'vertical' || 'horizontal'" :current="1" progressDot>
        <a-step title="$t('advancedAdvanced.cjxm')">
        </a-step>
        <a-step title="$t('advancedAdvanced.bmcs')">
        </a-step>
        <a-step title="$t('advancedAdvanced.cwfh')">
        </a-step>
        <a-step title="$t('advancedAdvanced.wc')">
        </a-step>
      </a-steps>
    </a-card>

    <a-card style="margin-top: 24px" :bordered="false" title="$t('advancedAdvanced.yhxx')">
      <detail-list>
        <detail-list-item term="{{ $t('advancedAdvanced.yhxm') }}">{{ $t('advancedAdvanced.fxx') }}</detail-list-item>
        <detail-list-item term="{{ $t('advancedAdvanced.hykh') }}">32943898021309809423</detail-list-item>
        <detail-list-item term="{{ $t('advancedAdvanced.sfz') }}">3321944288191034921</detail-list-item>
        <detail-list-item term="{{ $t('advancedAdvanced.lxfs') }}">18112345678</detail-list-item>
        <detail-list-item term="{{ $t('advancedAdvanced.lxdz') }}">{{ $t('advancedAdvanced.zjshzsxhqhgslgzljclk') }}</detail-list-item>
      </detail-list>
      <detail-list title="$t('advancedAdvanced.xxz')">
        <detail-list-item term="{{ $t('advancedAdvanced.mmsj') }}">725</detail-list-item>
        <detail-list-item term="{{ $t('advancedAdvanced.gsjgxsj') }}">2018-08-08</detail-list-item>
        <detail-list-item ></detail-list-item>
        <detail-list-item term="{{ $t('advancedAdvanced.mmsj') }}">725</detail-list-item>
        <detail-list-item term="{{ $t('advancedAdvanced.gsjgxsj') }}">2018-08-08</detail-list-item>
        <detail-list-item ></detail-list-item>
      </detail-list>
      <a-card type="inner" title="$t('advancedAdvanced.dcxxz')">
        <detail-list title="$t('advancedAdvanced.zmc')" size="small">
          <detail-list-item term="{{ $t('advancedAdvanced.fzr') }}">{{ $t('advancedAdvanced.ldd') }}</detail-list-item>
          <detail-list-item term="{{ $t('advancedAdvanced.jsm') }}">1234567</detail-list-item>
          <detail-list-item term="{{ $t('advancedAdvanced.ssbm') }}">XX{{ $t('advancedAdvanced.gs') }}-YY{{ $t('advancedAdvanced.b') }}</detail-list-item>
          <detail-list-item term="{{ $t('advancedAdvanced.gqsj') }}">2018-08-08</detail-list-item>
          <detail-list-item term="{{ $t('advancedAdvanced.ms') }}">这段{{ $t('advancedAdvanced.ms') }}很长很长很长很长很长很长很长很长很长很长很长很长很长很长...</detail-list-item>
        </detail-list>
        <a-divider style="margin: 16px 0" />
        <detail-list title="$t('advancedAdvanced.zmc')" size="small" :col="1">
          <detail-list-item term="{{ $t('advancedAdvanced.xm') }}">	Citrullus lanatus (Thunb.) Matsum. et Nakai{{ $t('advancedAdvanced.ynsmstb') }}；{{ $t('advancedAdvanced.jzczjmxdljxjc') }}..</detail-list-item>
        </detail-list>
        <a-divider style="margin: 16px 0" />
        <detail-list title="$t('advancedAdvanced.zmc')" size="small" :col="2">
          <detail-list-item term="{{ $t('advancedAdvanced.fzr') }}">{{ $t('advancedAdvanced.fxx') }}</detail-list-item>
          <detail-list-item term="{{ $t('advancedAdvanced.jsm') }}">1234567</detail-list-item>
        </detail-list>
      </a-card>

    </a-card>

    <a-card style="margin-top: 24px" :bordered="false" title="$t('advancedAdvanced.yhjbnldjl')">
      <div class="no-data"><a-icon type="frown-o"/>{{ $t('advancedAdvanced.zwsj') }}</div>
    </a-card>

    <!-- {{ $t('advancedAdvanced.cz') }} -->
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      :tabList="tabList"
      :activeTabKey="activeTabKey"
      @tabChange="(key) => {this.activeTabKey = key}"
    >
      <a-table
        v-if="activeTabKey === '1'"
        :columns="operationColumns"
        :dataSource="operation1"
        :pagination="false"
      >
        <template
          slot="status"
          slot-scope="status">
          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
        </template>
      </a-table>
      <a-table
        v-if="activeTabKey === '2'"
        :columns="operationColumns"
        :dataSource="operation2"
        :pagination="false"
      >
        <template
          slot="status"
          slot-scope="status">
          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
        </template>
      </a-table>
      <a-table
        v-if="activeTabKey === '3'"
        :columns="operationColumns"
        :dataSource="operation3"
        :pagination="false"
      >
        <template
          slot="status"
          slot-scope="status">
          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
        </template>
      </a-table>
    </a-card>

  </page-view>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'
import { PageView } from '@/layouts'
import DetailList from '@/components/tools/DetailList'

const DetailListItem = DetailList.Item

export default {
  name: 'Advanced',
  components: {
    PageView,
    DetailList,
    DetailListItem
  },
  mixins: [mixinDevice],
  data () {
    return {
      tabList: [
        {
          key: '1',
          tab: this.$t('advancedAdvanced.czrzy')
        },
        {
          key: '2',
          tab: this.$t('advancedAdvanced.czrze')
        },
        {
          key: '3',
          tab: this.$t('advancedAdvanced.czrzs')
        }
      ],
      activeTabKey: '1',

      operationColumns: [
        {
          title: this.$t('advancedAdvanced.czlx'),
          dataIndex: 'type',
          key: 'type'
        },
        {
          title: this.$t('advancedAdvanced.czr'),
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: this.$t('advancedAdvanced.zxjg'),
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: this.$t('advancedAdvanced.czsj'),
          dataIndex: 'updatedAt',
          key: 'updatedAt'
        },
        {
          title: this.$t('advancedAdvanced.bz'),
          dataIndex: 'remark',
          key: 'remark'
        }
      ],
      operation1: [
        {
          key: 'op1',
          type: this.$t('advancedAdvanced.dggxsx'),
          name: this.$t('advancedAdvanced.qll'),
          status: 'agree',
          updatedAt: '2017-10-03  19:23:12',
          remark: '-'
        },
        {
          key: 'op2',
          type: this.$t('advancedAdvanced.cwfs'),
          name: this.$t('advancedAdvanced.fxx'),
          status: 'reject',
          updatedAt: '2017-10-03  19:23:12',
          remark: this.$t('advancedAdvanced.btgyy')
        },
        {
          key: 'op3',
          type: this.$t('advancedAdvanced.bmcs'),
          name: this.$t('advancedAdvanced.zmm'),
          status: 'agree',
          updatedAt: '2017-10-03  19:23:12',
          remark: '-'
        },
        {
          key: 'op4',
          type: this.$t('advancedAdvanced.tjdd'),
          name: this.$t('advancedAdvanced.ldd'),
          status: 'agree',
          updatedAt: '2017-10-03  19:23:12',
          remark: this.$t('advancedAdvanced.hb')
        },
        {
          key: 'op5',
          type: this.$t('advancedAdvanced.cjdd'),
          name: this.$t('advancedAdvanced.hyy'),
          status: 'agree',
          updatedAt: '2017-10-03  19:23:12',
          remark: '-'
        }
      ],
      operation2: [
        {
          key: 'op2',
          type: this.$t('advancedAdvanced.cwfs'),
          name: this.$t('advancedAdvanced.fxx'),
          status: 'reject',
          updatedAt: '2017-10-03  19:23:12',
          remark: this.$t('advancedAdvanced.btgyy')
        },
        {
          key: 'op3',
          type: this.$t('advancedAdvanced.bmcs'),
          name: this.$t('advancedAdvanced.zmm'),
          status: 'agree',
          updatedAt: '2017-10-03  19:23:12',
          remark: '-'
        },
        {
          key: 'op4',
          type: '提交订单',
          name: '林东东',
          status: 'agree',
          updatedAt: '2017-10-03  19:23:12',
          remark: '很棒'
        }
      ],
      operation3: [
        {
          key: 'op2',
          type: '财务复审',
          name: '付小小',
          status: 'reject',
          updatedAt: '2017-10-03  19:23:12',
          remark: '不通过原因'
        },
        {
          key: 'op3',
          type: '部门初审',
          name: '周毛毛',
          status: 'agree',
          updatedAt: '2017-10-03  19:23:12',
          remark: '-'
        }
      ]
    }
  },
  filters: {
    statusFilter (status) {
      const statusMap = {
        'agree': '成功',
        'reject': '驳回'
      }
      return statusMap[status]
    },
    statusTypeFilter (type) {
      const statusTypeMap = {
        'agree': 'success',
        'reject': 'error'
      }
      return statusTypeMap[type]
    }
  }
}
</script>

<style lang="less" scoped>

  .detail-layout {
    margin-left: 44px;
  }
  .text {
    color: rgba(0, 0, 0, .45);
  }

  .heading {
    color: rgba(0, 0, 0, .85);
    font-size: 20px;
  }

  .no-data {
    color: rgba(0, 0, 0, .25);
    text-align: center;
    line-height: 64px;
    font-size: 16px;

    i {
      font-size: 24px;
      margin-right: 16px;
      position: relative;
      top: 3px;
    }
  }

  .mobile {
    .detail-layout {
      margin-left: unset;
    }
    .text {

    }
    .status-list {
      text-align: left;
    }
  }
</style>
